<template>
  <div>
    <el-row style="background: white">
      <el-col :span="24">
        <div class="tbUpDiv"><img src="src/public/imgs/3~~~13A7E$84RV~7O3L6@F1.png" class="tbImg">
          <span class="tbUpPost">我的考勤</span>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <div style="display: flex">
          <div style="width: 16%;border-right: 1px solid gainsboro">
            <div style="text-align: center;padding:15px 30px;border-bottom:1px solid gainsboro;">人员组织</div>
            <div style="padding: 20px 10px 0px 10px">
              <el-input
                  v-model="input2"
                  class="w-50 m-2"
                  :suffix-icon="Search"
              />
              <el-tree style="margin-top: 20px"
                       default-expand-all
                       :data="data" :props="defaultProps" @node-click="handleNodeClick" />
            </div>
          </div>
          <div style="width: 84%">
              <div>
                <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane label="考勤统计" name="floor">
                  <el-card>
                    <div class="el-calendar__header">
                      <span>{{str}}</span>
                      <div class="el-button-group">
                        <button class="el-button el-button--small" aria-disabled="false" type="button">
                          <span class=""> 上个月 </span>
                        </button>
                        <button class="el-button el-button--small" type="button">
                          <span class="">本月</span>
                        </button>
                        <button class="el-button el-button--small" aria-disabled="false" type="button">
                          <span class=""> 下个月 </span></button>
                      </div>
                    </div>
                  </el-card>
                  <div class="hodiv" style="display: flex;padding: 20px; ">
                          <div style="display:flex;width: 100%;border: 1px solid gainsboro">
                            <div style="width:25%;border-right:1px solid gainsboro;">
                              <div style="padding: 10px;border-bottom: 1px solid gainsboro;border-right: 1px solid gainsboro;">出勤统计</div>
                              <div>
                                    <div style="width: 249px;height: 260px;" id="container" ref="chart"></div>
                                    <div>
                                      <div style="display: flex;justify-content: space-around;">
                                        <span style="font-size: 20px;color:rgb(145,204,117)">10</span>
                                        <span style="font-size: 20px;color:rgb(84,112,198)">28</span>
                                      </div>
                                      <div style="display: flex;justify-content: space-evenly;">
                                        <span style="display: block;width:10px;height: 10px;border-radius:10px;background: rgb(145,204,117);margin-top: 6px"></span>实出勤（天）
                                        <span style="display: block;width:10px;height: 10px;border-radius:10px;background: rgb(84,112,198);margin-top: 6px"></span>应出勤（天）
                                      </div>
                                    </div>
                              </div>
                            </div>
                            <div style="width:75%;">
                              <div style="padding: 10px;border-bottom: 1px solid gainsboro;">异常考勤汇总</div>
                              <div style="display:flex;justify-content: space-between;">
                                <div>
                                  <div style="border-right: 1px solid gainsboro;display: flex;height:150px;width:600px;justify-content: space-evenly; align-items: center  ">
                                    <div style="display: flex;align-items: center;">
                                      <svg t="1665473525388" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7134" width="48" height="48"><path d="M0 0m273.066667 0l477.866666 0q273.066667 0 273.066667 273.066667l0 477.866666q0 273.066667-273.066667 273.066667l-477.866666 0q-273.066667 0-273.066667-273.066667l0-477.866666q0-273.066667 273.066667-273.066667Z" fill="#7AD6A6" p-id="7135"></path><path d="M775.7312 387.703467l-200.4992 92.757333-78.7456 133.341867a15.940267 15.940267 0 0 1-7.253333 6.826666l-39.611734 18.773334a16.896 16.896 0 0 1-7.253333 0 16.418133 16.418133 0 0 1-10.632533-3.857067 16.913067 16.913067 0 0 1-5.307734-17.8688l24.644267-81.646933-48.315733 23.1936h-3.857067a92.279467 92.279467 0 0 1-96.631467-21.265067l-74.888533-69.563733a16.913067 16.913067 0 0 1-5.307733-14.984534 16.4352 16.4352 0 0 1 9.659733-12.561066l34.304-15.940267a16.913067 16.913067 0 0 1 13.038933 0l75.3664 35.754667 109.226667-60.398934-98.986667-48.315733a17.390933 17.390933 0 0 1-9.659733-15.4624 16.913067 16.913067 0 0 1 9.659733-15.4624l44.373334-20.770133a17.390933 17.390933 0 0 1 11.1104 0l166.1952 42.0352 90.8288-42.0352a91.306667 91.306667 0 0 1 83.626666 0 45.4144 45.4144 0 0 1 14.984534 86.4768z m-43.008 339.2h-459.451733a24.1664 24.1664 0 0 1 0-48.315734h459.451733a24.1664 24.1664 0 0 1 0 48.315734z" fill="#FFFFFF" p-id="7136"></path></svg>
                                      <span style="font-size: 24px;color: rgb(153,153,153);">0</span>
                                      <span>出差(天)</span>
                                    </div>
                                    <div style="display: flex;align-items: center;">
                                      <svg t="1665473676340" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28427" width="48" height="48"><path d="M879.01 235.29H723.46v-38.07c0-57.18-46.51-103.69-103.69-103.69H404.43c-57.18 0-103.69 46.51-103.69 103.69v38.07H145.19c-43.06 0-78.09 35.03-78.09 78.09v539.25c0 43.06 35.03 78.09 78.09 78.09H879c43.06 0 78.09-35.03 78.09-78.09V313.38c0.01-43.06-35.02-78.09-78.08-78.09z m-511.03-38.07c0-20.1 16.35-36.45 36.45-36.45h215.33c20.1 0 36.45 16.35 36.45 36.45v38.07H367.98v-38.07zM145.19 302.53H879c5.99 0 10.86 4.87 10.86 10.86v20.02c-11.97 78.06-59.31 149.14-131.72 199.83-13.16-26.16-39.98-44.33-71.21-44.33-44.09 0-79.96 35.86-79.96 79.95V598c-61.9 13.09-127.79 13.1-189.76 0.09v-29.23c0-44.09-35.86-79.95-79.95-79.95-31.38 0-58.33 18.33-71.41 44.71-71.36-49.87-118.61-119.85-131.51-196.38v-23.85c0-5.99 4.87-10.86 10.85-10.86z m554.47 266.33v96.9c0 7.01-5.71 12.73-12.73 12.73s-12.73-5.71-12.73-12.73v-96.9c0-7.01 5.71-12.72 12.73-12.72s12.73 5.7 12.73 12.72z m-349.68 0v96.9c0 7.01-5.7 12.73-12.72 12.73s-12.73-5.71-12.73-12.73v-96.9c0-7.01 5.71-12.72 12.73-12.72s12.72 5.7 12.72 12.72z m529.03 294.63H145.19c-5.99 0-10.86-4.87-10.86-10.86V499.58c31.79 42.19 73.5 78.92 122.96 108v58.18c0 44.09 35.87 79.96 79.96 79.96 43.84 0 79.48-35.49 79.88-79.23 30.99 5.66 62.62 8.76 94.64 8.76 32.28 0 64.09-3.21 95.25-8.95 0.3 43.84 36 79.43 79.91 79.43 44.09 0 79.96-35.87 79.96-79.96v-58.34C816.5 578.2 858.14 541.29 889.85 499v353.64c0.01 5.98-4.86 10.85-10.84 10.85z" fill="#1296db" p-id="28428"></path></svg>
                                      <span style="font-size: 24px;color: rgb(153,153,153);">0</span>
                                      <span>共出(天)</span>
                                    </div>
                                    <div style="display: flex;align-items: center;">
                                      <svg t="1665473749159" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29979" width="48" height="48"><path d="M859.831052 656.36486c-213.616449 0-386.78729-173.170841-386.787289-386.78729a385.435514 385.435514 0 0 1 36.282617-163.88785c-228.366355 27.334579-405.53271 221.71514-405.532711 457.498317 0 254.49271 206.367103 460.811963 460.871776 460.811963 234.981682 0 428.883738-175.850467 457.23514-403.211963a385.196262 385.196262 0 0 1-162.069533 35.576823z" fill="#6F6CFF" p-id="29980"></path><path d="M486.83666 971.113271A484.354393 484.354393 0 0 1 2.111426 486.376075c0-245.233645 183.410841-452.186916 426.610841-481.244112l42.766356-5.131963-18.278879 39.034019a363.591776 363.591776 0 0 0-34.105421 153.707663c0 200.098692 162.775327 362.862056 362.862057 362.862056h0.418691a364.058318 364.058318 0 0 0 151.614206-33.339813l39.105794-18.075514-5.323364 42.754393a484.797009 484.797009 0 0 1-480.945047 424.170467z m-93.404112-911.551402C194.936847 102.603364 49.961894 279.31514 49.961894 486.376075c0 240.951028 195.971589 436.886729 436.874766 436.886729 205.960374 0 382.456822-144.08972 426.407477-341.329346a412.195888 412.195888 0 0 1-130.859066 21.53271h-0.442617a409.540187 409.540187 0 0 1-290.392523-120.296075 410.856075 410.856075 0 0 1-98.093458-423.644112z" fill="#333333" p-id="29981"></path></svg>
                                      <span style="font-size: 24px;color: rgb(153,153,153);">0</span>
                                      <span>加班(天)</span>
                                    </div>
                                  </div>
                                  <div style="border-top: 1px solid gainsboro;border-right: 1px solid gainsboro;height: 197px">
                                    <div style="display: flex;align-items: center;">
                                      <svg t="1665475106298" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2610" width="32" height="32" style="margin-left: 10px"><path d="M695.715 391.884h-367.689c-16.937 0-30.641 13.703-30.641 30.641s13.704 30.641 30.641 30.641h367.689c16.937 0 30.641-13.704 30.641-30.641s-13.704-30.641-30.641-30.641zM695.715 269.317h-367.689c-16.937 0-30.641 13.704-30.641 30.641s13.704 30.641 30.641 30.641h367.689c0.008 0 0.012 0 0.020 0 16.912 0 30.621-13.71 30.621-30.621 0-0.007 0-0.013 0-0.020 0-0.005 0-0.008 0-0.014 0-16.914-13.713-30.626-30.626-30.626-0.007 0-0.009 0-0.017 0zM848.918 632.972v-424.937c0-33.841-27.437-61.282-61.282-61.282h-551.538c-33.841 0-61.282 27.442-61.282 61.282v612.819c0 33.845 27.442 61.282 61.282 61.282h361.442c1.854 0.401 3.986 0.628 6.17 0.628 8.458 0 16.114-3.431 21.653-8.978l214.875-214.875c5.549-5.535 8.983-13.191 8.983-21.648 0-1.514-0.11-3.002-0.323-4.458zM634.434 778.064v-110.417h110.417l-110.417 110.417zM787.637 606.366h-183.845c-0.006 0-0.008 0-0.015 0-16.914 0-30.626 13.713-30.626 30.626 0 0.007 0 0.009 0 0.017l0.005 0.162-0.005 0.163v183.514h-306.407c-0.006 0-0.008 0-0.015 0-16.913 0-30.626-13.713-30.626-30.626 0-0.007 0-0.009 0-0.017v-551.528c0-0.006 0-0.008 0-0.015 0-16.914 13.713-30.626 30.626-30.626 0.007 0 0.009 0 0.017 0h490.252c0.007 0 0.012 0 0.020 0 16.912 0 30.622 13.71 30.622 30.622 0 0.007 0 0.013 0 0.020v367.688z" fill="#2c2c2c" p-id="2611"></path></svg>
                                      <span style="margin-left: 20px">请假信息</span>
                                    </div>
                                    <div style="display:flex;justify-content: center;align-items: center; height: 164px">
                                      <el-table :data="tableData" height="165"
                                                style="width: 100%;background:rgb(244,244,244);"
                                                :row-style="{background:'rgb(244,244,244)'}"
                                                :header-cell-style="{background:'rgb(244,244,244)'}">
                                        <el-table-column prop="name" label="员工姓名" width="180"/>
                                        <el-table-column prop="date" label="请假日期" width="180" />
                                        <el-table-column prop="address" label="请假时长" />
                                      </el-table>
                                    </div>
                                  </div>
                                </div>
                                <div style="width:167px" >
                                 <div style="display: flex;flex-direction: column;justify-content: space-around;">
                                   <div style="display:flex;align-items: center;justify-content: space-between;height: 60px">
                                   <span style="font-size: 24px;color: rgb(153,153,153);margin-left: 20px">0</span>
                                   <span style="font-size: 12px;margin-right: 44px">迟到</span>
                                   </div>
                                 <div style="display:flex;align-items: center;justify-content: space-between;height: 60px">
                                   <span style="font-size: 24px;color: rgb(153,153,153);margin-left: 20px">1</span>
                                   <span style="font-size: 12px;margin-right: 20px">严重迟到</span>
                                 </div>
                                 <div style="display:flex;align-items: center;justify-content: space-between;height: 60px">
                                   <span style="font-size: 24px;color: rgb(153,153,153);margin-left: 20px">1</span>
                                   <span style="font-size: 12px;margin-right: 44px">早退</span>
                                </div>
                                 <div style="display:flex;align-items: center;justify-content: space-between;height: 60px">
                                   <span style="font-size: 24px;color: rgb(153,153,153);margin-left: 20px">0</span>
                                   <span style="font-size: 12px;margin-right: 20px">严重早退</span>
                                </div>
                                 <div style="display:flex;align-items: center;justify-content: space-between;height: 60px">
                                   <span style="font-size: 24px;color: rgb(153,153,153);margin-left: 20px">0</span>
                                   <span style="font-size: 12px;margin-right: 44px">旷工</span>
                                </div>
                                 <div style="display:flex;align-items: center;justify-content: space-between;height: 50px">
                                   <span style="font-size: 24px;color: rgb(153,153,153);margin-left: 20px">0</span>
                                   <span style="font-size: 12px;margin-right: 44px">漏签</span>
                                </div>
                                 </div>
                                </div>
                              </div>
                            </div>
                          </div>
                  </div>
                  <div style="display: flex;padding: 20px;justify-content: space-between;">
                      <div style="border: 1px solid gainsboro;width: 320px;">
                        <div style="background: rgb(220,239,248);font-size: 18px;height: 40px;line-height: 40px;color: rgb(72,74,149)"><span style="margin-left: 10px">年假</span></div>
                        <div style="height: 40px;line-height: 40px;font-size: 10px"><span style="margin-left: 10px">历年可请天数</span><span style="margin-left: 200px">4天</span></div>
                        <div style="height: 40px;line-height: 40px;font-size: 10px"><span style="margin-left: 10px">今年可请天数</span><span style="margin-left: 200px">0天</span></div>
                        <div style="height: 40px;line-height: 40px;font-size: 10px"><span style="margin-left: 10px">总年可请天数</span><span style="margin-left: 200px">4天</span></div>
                      </div>
                    <div style="border: 1px solid gainsboro;width: 320px">
                      <div style="background: rgb(220,239,248);font-size: 18px;height: 40px;line-height: 40px;color: rgb(72,74,149)"><span style="margin-left: 10px">病假</span></div>
                      <div style="height: 40px;line-height: 40px;font-size: 10px"><span style="margin-left: 10px">历年可请天数</span><span style="margin-left: 200px">4天</span></div>
                      <div style="height: 40px;line-height: 40px;font-size: 10px"><span style="margin-left: 10px">今年可请天数</span><span style="margin-left: 200px">0天</span></div>
                      <div style="height: 40px;line-height: 40px;font-size: 10px"><span style="margin-left: 10px">总年可请天数</span><span style="margin-left: 200px">4天</span></div>
                    </div>
                    <div style="border: 1px solid gainsboro;width: 320px">
                      <div style="background: rgb(220,239,248);font-size: 18px;height: 40px;line-height: 40px;color: rgb(72,74,149)"><span style="margin-left: 10px">事假</span></div>
                      <div style="height: 40px;line-height: 40px;font-size: 10px"><span style="margin-left: 10px">历年可请天数</span><span style="margin-left: 200px">4天</span></div>
                      <div style="height: 40px;line-height: 40px;font-size: 10px"><span style="margin-left: 10px">今年可请天数</span><span style="margin-left: 200px">0天</span></div>
                      <div style="height: 40px;line-height: 40px;font-size: 10px"><span style="margin-left: 10px">总年可请天数</span><span style="margin-left: 200px">4天</span></div>
                    </div>
                  </div>
                </el-tab-pane>
                  <el-tab-pane label="考勤日历" name="floor2">
                    <el-card>
                      <el-calendar ref="calendar">
                        <template #header="{ date }">
                          <span>{{ date }}</span>
                          <el-button-group>
                            <el-button size="small" @click="selectDate('prev-month')">
                              上个月
                            </el-button>
                            <el-button size="small" @click="selectDate('today')">今天</el-button>
                            <el-button size="small" @click="selectDate('next-month')">
                              下个月
                            </el-button>
                          </el-button-group>
                          <div class="icondiv">
                            <div>
                              <svg t="1664353535534" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2587" width="20" height="20"><path d="M512 0C229.23 0 0 229.23 0 512s229.23 512 512 512 512-229.23 512-512S794.77 0 512 0z m262.544 381.417L463.417 692.544a35.84 35.84 0 0 1-13.049 8.338c-13.045 5.388-28.612 2.785-39.214-7.816l-161.22-161.22c-14.059-14.059-14.059-36.853 0-50.912 14.059-14.059 36.853-14.059 50.912 0l136.179 136.179 286.608-286.608c14.059-14.059 36.853-14.059 50.912 0 14.058 14.059 14.058 36.853-0.001 50.912z" fill="#d81e06" p-id="88"></path></svg>
                            </div>
                            <div>
                              正常
                            </div>
                          </div>
                          <div class="icondiv">
                            <div>
                              <svg t="1664354182033" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2993" width="20" height="20"><path d="M511.7952 88.1664c-253.3376 0-459.008 205.6704-459.008 459.008s205.6704 459.008 459.008 459.008 459.008-205.6704 459.008-459.008c0-254.1568-205.6704-459.008-459.008-459.008z m115.1488 544.5632H483.84c-31.2832 0-57.6-25.4976-57.6-57.6l41.0112-224.8192c0-31.2832 25.4976-57.6 57.6-57.6s57.6 25.4976 57.6 57.6l-30.1568 167.2704h74.7008c31.2832 0 57.6 25.4976 57.6 57.6-0.8704 31.232-26.368 57.5488-57.6512 57.5488z" p-id="2994" fill="#f4ea2a"></path><path d="M311.0912 59.392s-116.7872-92.1088-229.4784 0-28.7744 229.4784-28.7744 229.4784C135.0656 134.2464 311.0912 59.392 311.0912 59.392zM942.0288 59.392c-112.6912-92.1088-229.4784 0-229.4784 0s176.8448 74.8544 258.304 228.6592c-0.0512 0 83.8656-136.5504-28.8256-228.6592zM942.0288 59.392z" p-id="2995" fill="#f4ea2a"></path></svg>                      </div>
                            <div>
                              迟到
                            </div>
                          </div>
                          <div class="icondiv">
                            <div>
                              <svg t="1664354216163" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3231" width="20" height="20"><path d="M303.5648 1005.3632c-52.9408 0-100.9664 1.8432-148.736-0.4608-60.672-2.8672-105.5232-57.7536-105.984-127.5392-0.5632-91.8016-0.1024-183.6544-0.1024-275.456 0-156.8256-0.0512-313.6512-0.0512-470.4768C48.6912 52.0192 83.8656 16.896 163.072 16.896c235.6224 0 471.296 0.9728 706.9184-0.7168 62.3616-0.4608 104.2432 35.1232 103.7312 102.2976-2.2016 268.1344-0.9216 536.2688-0.9728 804.4032 0 47.104-27.392 76.8512-74.5472 82.1248-28.1088 3.1232-46.7968-4.9664-68.1984-27.7504-54.1184-57.4976-76.032-121.6512-65.1264-198.7072 1.4336-10.2912 0.2048-20.9408 0.2048-34.0992 28.5696-1.9456 55.7056-3.7888 90.4704-6.1952-32.3072-33.4848-47.9744-73.5232-90.9824-95.5904V105.5232c-9.2672-0.6656-16.3328-1.6896-23.3984-1.6896-172.2368-0.0512-344.5248 0.3584-516.7616-0.512-21.5552-0.1024-27.5456 5.8368-27.2384 27.3408 1.1776 90.1632 0.512 180.3776 0.4608 270.592v27.136c24.5248 0 46.336 1.0752 67.8912-0.6656 6.2976-0.512 12.9536-8.2944 17.7152-14.1312 27.136-33.3312 53.4016-67.3792 80.64-100.7104 14.7456-18.0736 34.1504-25.2416 58.0096-24.8832 61.7472 0.9728 123.5456-0.768 185.2416 0.9728 12.3904 0.3584 28.3136 8.3456 35.9936 18.0224 24.2176 30.4128 46.3872 62.72 66.9696 95.744 5.5808 9.0112 7.9872 29.1328 2.6112 33.9968-11.9296 10.8544-24.8832 2.3552-34.1504-10.496-7.5776-10.496-16.7936-19.8144-25.2928-29.6448-49.2032-56.832-49.2032-56.4736-123.5456-55.3472-19.712 0.3072-22.3744 7.424-14.592 23.9104 17.3568 36.7104 32.6656 74.3936 51.3024 110.3872 16.5888 32.0512 24.1664 65.024 22.2208 100.7616-1.2288 22.7328-0.9728 45.4656-1.8432 68.1984-1.0752 29.952 1.8944 33.28 32.8704 32.7168 40.6016-0.6656 81.7152 2.048 121.7024-3.3792 42.24-5.7344 57.1904 23.3472 83.3536 50.432-19.3536 1.28-32.8192 2.7648-46.336 2.9696-67.4304 0.8192-134.8608 1.3824-202.2912 1.7408-35.9424 0.2048-42.3424-5.0176-46.1824-40.6528-4.6592-42.752-7.7312-85.7088-12.3904-128.512-0.768-6.9632-6.1952-13.4144-9.472-20.1216-5.376 5.3248-12.5952 9.6768-15.872 16.0768-47.5136 92.416-95.1808 184.7808-141.1072 277.9648-9.472 19.2-20.8896 28.7744-41.8304 29.2864-15.0528 0.4096-30.0544 2.8672-45.0048 4.4032 36.4544-74.8032 72.1408-148.3264 108.1344-221.7472 17.8688-36.4544 37.0688-72.2944 53.76-109.2608 3.7376-8.2432 2.2528-21.1456-1.4336-29.952-13.1072-31.3856-28.3136-61.8496-42.5472-92.7744-3.2768-7.1168-5.9904-14.5408-12.032-29.2352-18.2272 25.2416-34.5088 44.9024-47.4624 66.56-11.008 18.3296-24.4736 25.4976-45.6192 23.7568-20.1728-1.6896-40.6016 0.3072-60.928-0.256-13.4656-0.4096-18.7392 4.608-18.688 18.432 0.3072 126.7712-0.1024 253.5424 0.7168 380.2624 0.0512 9.216 6.144 19.9168 12.4928 27.2384 25.6 29.3888 52.48 57.6512 78.7456 86.528 4.4544 4.8128 8.0896 10.3424 14.1824 18.3808z m0 0" p-id="3232" fill="#1afa29"></path><path d="M370.2784 141.4144c39.7824-0.0512 69.5808 29.2864 69.4272 68.4032-0.1536 37.1712-30.4128 67.84-67.6352 68.5568-38.656 0.7168-70.0928-29.5936-70.5536-67.9424-0.512-39.0656 29.3376-69.0176 68.7616-69.0176z m0 0M438.3232 1004.4416c-41.2672 5.0176-74.9056 7.5264-99.584-30.8224-18.8928-29.44-44.9536-54.272-70.5024-84.224 23.4496-1.9968 42.496-4.3008 61.5936-4.8128 5.3248-0.1536 12.3904 3.6864 16.0256 7.936 30.208 35.84 59.7504 72.192 92.4672 111.9232z m0 0" p-id="3233" fill="#1afa29"></path></svg>
                            </div>
                            <div>
                              早退
                            </div>
                          </div>
                          <div class="icondiv">
                            <div>
                              <svg t="1664354300655" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3463" width="20" height="20"><path d="M996.7104 909.5168V177.7664c0-57.6512-48.3328-104.5504-107.7248-104.5504h-64.0512v-10.1888c0-10.2912-15.6672-18.6368-35.072-18.6368-19.3536 0-35.072 8.3456-35.072 18.6368V73.216H222.7712v-10.1888c0-10.2912-15.7184-18.6368-35.072-18.6368s-35.072 8.3456-35.072 18.6368V73.216h-17.8688c-59.392 0-107.6736 46.8992-107.6736 103.424v731.7504c0 58.7264 48.3328 105.6256 107.7248 105.6256h754.176c59.4432 0.0512 107.776-46.848 107.7248-104.4992z m-304.4352-150.016c14.336 14.336 14.336 37.7856 0 52.0704-14.336 14.336-37.7856 14.336-52.0704 0l-128.256-128.256-128.256 128.256c-14.336 14.336-37.7856 14.336-52.0704 0-14.336-14.336-14.336-37.7856 0-52.0704l128.256-128.256-128.256-128.2048c-14.336-14.336-14.336-37.7856 0-52.0704 14.336-14.336 37.7856-14.336 52.0704 0l128.256 128.256 128.256-128.256c14.336-14.336 37.7856-14.336 52.0704 0 14.336 14.336 14.336 37.7856 0 52.0704L564.0192 631.296l128.256 128.2048z m222.5664-502.6816h-805.888v-50.6368h805.888v50.6368z" p-id="3464" fill="#1296db"></path></svg>                      </div>
                            <div>
                              旷工
                            </div>
                          </div>
                          <div class="icondiv">
                            <div>
                              <svg t="1664354365892" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4670" width="20" height="20"><path d="M235.8 67.9C153 87.4 87.4 153 67.9 235.8L235.8 67.9z" fill="#FF6968" p-id="4671"></path><path d="M301.7 62H287C163.3 62 62 163.3 62 287v14.7L301.7 62z" fill="#FF6867" p-id="4672"></path><path d="M361.7 62H287C163.3 62 62 163.3 62 287v74.7L361.7 62z" fill="#FF6866" p-id="4673"></path><path d="M421.6 62H287C163.3 62 62 163.3 62 287v134.6L421.6 62z" fill="#FF6765" p-id="4674"></path><path d="M481.6 62H287c-19.4 0-38.3 2.5-56.3 7.2L69.2 230.7c-4.7 18-7.2 36.9-7.2 56.3v194.6L481.6 62z" fill="#FF6764" p-id="4675"></path><path d="M62 541.6L541.6 62H297.9L62 297.9z" fill="#FF6763" p-id="4676"></path><path d="M62 601.6L601.6 62H357.8L62 357.8z" fill="#FF6662" p-id="4677"></path><path d="M62 417.8v243.7L661.5 62H417.8z" fill="#FF6661" p-id="4678"></path><path d="M62 477.8v243.7L721.5 62H477.8z" fill="#FF6560" p-id="4679"></path><path d="M737 62H537.8L62 537.8V737c0 13.9 1.3 27.5 3.7 40.8l712-712C764.5 63.3 750.9 62 737 62z" fill="#FF655F" p-id="4680"></path><path d="M737 62H597.7L62 597.7V737c0 30.8 6.3 60.1 17.6 86.9L823.9 79.6C797.1 68.3 767.8 62 737 62z" fill="#FF655E" p-id="4681"></path><path d="M862.8 100.7C826.8 76.3 783.5 62 737 62h-79.3L62 657.7V737c0 46.5 14.3 89.8 38.7 125.8l762.1-762.1z" fill="#FF645D" p-id="4682"></path><path d="M895.6 127.8C854.9 87.2 798.7 62 737 62h-19.3L62 717.7V737c0 61.7 25.2 117.9 65.8 158.6l767.8-767.8z" fill="#FF645C" p-id="4683"></path><path d="M65.2 774.5C75.6 835.8 111 889 160.6 922.8l762.3-762.3c-33.9-49.5-87-85-148.3-95.4L65.2 774.5z" fill="#FF635B" p-id="4684"></path><path d="M78.5 821.2c22.4 55.1 66.2 99.6 120.8 122.9l744.8-744.8c-23.3-54.7-67.8-98.4-122.9-120.8L78.5 821.2z" fill="#FF635A" p-id="4685"></path><path d="M99.2 860.5c33 49.9 85.3 86.1 146.1 97.6l712.8-712.8c-11.5-60.8-47.7-113.1-97.6-146.1L99.2 860.5z" fill="#FF635A" p-id="4686"></path><path d="M962 287c0-63-26.2-120.1-68.3-161.1L125.9 893.7C166.9 935.8 224 962 287 962h14.3L962 301.3V287z" fill="#FF6259" p-id="4687"></path><path d="M962 287c0-47.8-15.1-92.2-40.7-128.7l-763 763C194.8 946.9 239.2 962 287 962h74.3L962 361.3V287z" fill="#FF6258" p-id="4688"></path><path d="M962 287c0-32.1-6.8-62.7-19.1-90.4L196.6 942.9c27.7 12.3 58.3 19.1 90.4 19.1h134.3L962 421.3V287z" fill="#FF6157" p-id="4689"></path><path d="M287 962h194.2L962 481.2V287c0-15.4-1.6-30.4-4.5-44.9L242.1 957.5c14.5 2.9 29.5 4.5 44.9 4.5z" fill="#FF6156" p-id="4690"></path><path d="M541.2 962L962 541.2V297.5L297.5 962z" fill="#FF6155" p-id="4691"></path><path d="M601.2 962L962 601.2V357.5L357.5 962z" fill="#FF6054" p-id="4692"></path><path d="M661.2 962L962 661.2V417.4L417.4 962z" fill="#FF6053" p-id="4693"></path><path d="M721.1 962L962 721.1V477.4L477.4 962z" fill="#FF5F52" p-id="4694"></path><path d="M962 737V537.4L537.4 962H737c17.1 0 33.7-1.9 49.7-5.6l169.7-169.7c3.7-16 5.6-32.6 5.6-49.7z" fill="#FF5F51" p-id="4695"></path><path d="M962 597.4L597.4 962H737c123.8 0 225-101.3 225-225V597.4z" fill="#FF5F50" p-id="4696"></path><path d="M962 657.3L657.3 962H737c123.8 0 225-101.3 225-225v-79.7z" fill="#FF5E4F" p-id="4697"></path><path d="M962 717.3L717.3 962H737c123.8 0 225-101.3 225-225v-19.7z" fill="#FF5E4E" p-id="4698"></path><path d="M957.5 781.8L781.8 957.5c88-18 157.7-87.7 175.7-175.7z" fill="#FF5D4D" p-id="4699"></path><path d="M701 728H323c-19.9 0-36-16.1-36-36V386c0-19.9 16.1-36 36-36h378c19.9 0 36 16.1 36 36v306c0 19.9-16.1 36-36 36z" fill="#FFCDCB" p-id="4700"></path><path d="M431 404c-14.9 0-27-12.1-27-27v-54c0-14.9 12.1-27 27-27s27 12.1 27 27v54c0 14.9-12.1 27-27 27zM593 404c-14.9 0-27-12.1-27-27v-54c0-14.9 12.1-27 27-27s27 12.1 27 27v54c0 14.9-12.1 27-27 27z" fill="#FFE9E9" p-id="4701"></path><path d="M502.4 624.2l-0.4 0.4c-7 7-18.4 7-25.5 0l-65.8-65.8c-7-7-7-18.4 0-25.5l0.4-0.4c7-7 18.4-7 25.5 0l65.8 65.8c7 7.1 7 18.5 0 25.5z" fill="#FFFFFF" p-id="4702"></path><path d="M482.3 624.6l-0.4-0.4c-7-7-7-18.4 0-25.5l105.5-105.5c7-7 18.4-7 25.5 0l0.4 0.4c7 7 7 18.4 0 25.5L507.7 624.6c-7 7-18.4 7-25.4 0z" fill="#FFFFFF" p-id="4703"></path></svg>                      </div>
                            <div>
                              漏签
                            </div>
                          </div>
                          <div class="icondiv">
                            <div>
                              <svg t="1664354429260" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5779" width="20" height="20"><path d="M376.6784 726.4768c0-33.4848 5.2224-65.792 15.104-96.1536 9.8816-30.8736 24.4224-58.7776 42.1888-84.48 18.3808-25.8048 39.5264-48.3328 64.5632-68.2496 24.32-20.0704 52.0704-35.584 81.7152-47.6672 2.048-4.5568 3.2768-9.0624 6.0416-16.2304l4.5056-12.3392c0.6656-3.84 2.048-7.68 3.2768-10.8544 6.0416-2.048 11.264-5.2224 16.3328-9.7792 4.5568-3.84 8.4992-9.728 12.4928-16.7424 3.2768-7.1168 6.0416-17.4592 7.2704-29.6448 0.6656-9.0624 0.6656-16.7424-0.6656-23.1936-1.9456-6.4512-3.2768-11.52-6.0416-15.5136-2.6112-4.5568-6.0416-8.3968-9.8816-11.008 0-23.9104-2.048-47.104-4.5056-69.632-3.2768-20.0704-7.8336-41.216-15.104-63.1808-6.6048-21.9648-17.8688-42.5984-32.9728-60.5696-6.6048-7.68-15.7696-16.2304-26.9312-23.9104-11.264-7.68-24.32-14.848-38.7072-21.2992-14.5408-5.7856-30.208-10.9568-46.6944-14.848-16.3328-3.84-32.9728-5.888-49.9712-5.888-13.1584 0-26.9312 1.2288-41.472 3.2768-14.5408 1.9456-28.9792 5.7856-43.52 11.52-14.5408 5.7856-28.9792 14.1312-42.1376 23.9104-13.2096 9.728-25.7024 22.6816-37.4784 38.7072-11.8272 16.7424-21.1456 35.584-26.9312 56.7296-6.0416 21.2992-9.8816 41.216-12.4928 59.3408-2.048 21.9648-3.2768 43.264-3.2768 65.0752-5.2224 5.888-8.4992 11.52-11.264 17.9712-2.6112 6.4512-4.5568 13.568-5.2224 21.2992-0.6656 7.68 0.6656 16.7424 3.2768 26.5216 2.6112 10.2912 6.6048 17.4592 10.5984 22.6816 3.9936 5.2224 7.8336 9.728 11.264 12.3392 4.5568 2.6112 8.4992 4.5056 12.4928 5.888 2.6112 9.0624 6.0416 17.9712 8.4992 26.5216 2.6112 7.68 6.0416 14.848 9.8816 21.9648 3.2768 7.1168 7.8336 12.9024 12.4928 16.7424 9.8816 8.3968 19.0976 16.2304 26.9312 23.9104 7.8336 7.68 12.4928 18.7904 13.8752 31.5904 0.6656 9.7792 0.6656 17.4592 0.6656 25.1392 0 7.168-2.048 14.1312-4.5568 21.2992-3.2768 7.168-7.8336 14.1312-14.5408 21.2992-6.7072 7.1168-15.7696 14.1312-28.416 21.9648-9.8816 6.4512-21.7088 11.52-34.2016 16.1792-12.4928 4.5568-25.7024 8.3968-38.8608 12.3392-13.8752 3.84-26.9312 7.68-39.5776 11.52-12.4928 4.5568-24.32 9.728-34.8672 16.2304-10.5984 7.168-19.7632 14.848-26.9312 23.9104-7.2704 9.0624-11.8272 20.5824-14.5408 34.7648-6.0416 37.376-7.2704 67.6864-3.9936 91.4432 3.2768 23.9104 7.8336 38.0416 14.5408 42.5984 3.9936 2.6112 12.4928 5.888 25.7024 8.3968 13.2096 2.6112 29.6448 5.888 48.7424 8.3968 19.7632 3.2768 40.8064 5.888 64.5632 8.3968 23.6032 2.6112 47.5136 5.2224 71.1168 7.168 24.4224 1.9456 47.5136 3.1744 69.888 4.4032 22.3744 1.2288 42.1888 2.048 59.3408 2.048h23.1936c-13.8752-23.9104-25.1392-49.7152-32.9728-76.7488-7.8336-27.4432-11.8272-55.8592-11.8272-85.5552z m0 0" p-id="5780" fill="#d4237a"></path><path d="M959.3856 623.36c-14.5408-32.9728-34.2016-61.2352-59.3408-86.3744-24.9856-24.4224-53.9648-43.8272-87.5008-57.9584-33.6384-14.1312-69.0688-21.2992-107.4176-21.2992-38.1952 0-74.4448 7.1168-107.9296 21.2992-33.6384 14.1312-62.6176 33.4848-87.5008 57.9584-24.9856 24.4224-44.7488 53.5552-59.3408 86.3744-14.5408 32.9728-21.7088 67.6864-21.7088 105.0624s7.2704 72.2432 21.7088 105.0624c14.5408 32.9728 34.2016 61.2352 59.3408 86.3744 24.9856 24.4224 53.9648 43.8272 87.5008 57.9584 33.6384 14.1312 69.888 21.2992 107.9296 21.2992 38.0416 0 73.728-7.1168 107.4176-21.2992 33.6384-14.1312 62.6176-33.4848 87.5008-57.9584 25.1392-24.4224 44.7488-53.5552 59.3408-86.3744 14.5408-32.9728 21.7088-67.6864 21.7088-105.0624 0-37.2224-7.2704-72.0896-21.7088-105.0624z m-178.4832 224.8192c-10.5984 0-21.1456-4.096-29.1328-12.0832l-82.1248-82.432c-7.424-7.2704-12.0832-17.7152-12.0832-28.9792v-164.4032c0-22.784 18.3808-41.0624 41.0624-41.0624 22.6816 0 41.0624 18.3808 41.0624 41.0624v147.5072l70.1952 70.1952c16.0768 16.0768 16.0768 42.0352 0 58.112-7.9872 7.936-18.432 12.0832-28.9792 12.0832z m0 0" p-id="5781" fill="#d4237a"></path></svg>                      </div>
                            <div>
                              请假
                            </div>
                          </div>
                          <div class="icondiv">
                            <div>
                              <svg t="1664354509001" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6839" width="20" height="20"><path d="M201.728 776.192c0-20.138667 16.384-36.522667 36.522667-36.522667h547.84c20.138667 0 36.522667 16.384 36.522666 36.181334 0 20.138667-16.384 36.522667-36.522666 36.522666H238.250667c-20.138667 0-36.522667-16.384-36.522667-36.181333z" fill="#635DF7" opacity=".7" p-id="6840"></path><path d="M201.728 776.192c0-20.138667 16.384-36.522667 36.522667-36.522667h547.84c20.138667 0 36.522667 16.384 36.522666 36.181334 0 20.138667-16.384 36.522667-36.522666 36.522666H238.250667c-20.138667 0-36.522667-16.384-36.522667-36.181333zM944.128 425.301333c9.216 14.677333 2.730667 35.157333-12.629333 39.936L279.210667 680.96c-26.624 8.874667-55.296 1.024-74.752-20.138667l-123.221334-132.096c-10.922667-11.605333-3.754667-32.085333 11.264-32.768l19.797334-1.024c10.24-0.341333 20.821333 2.048 29.696 7.168L221.866667 547.84c16.725333 9.557333 36.864 11.264 54.954666 4.096l130.730667-51.882667L245.76 268.629333c-11.605333-20.138667-3.072-47.104 17.408-54.272 10.922667-3.754667 24.234667-4.096 40.277333 4.437334 39.936 20.821333 203.776 155.989333 252.928 196.608 9.216 7.509333 20.138667 11.946667 31.402667 12.288h2.389333l180.224-71.338667c19.456-7.850667 40.618667-10.24 61.098667-6.826667 33.109333 5.461333 80.213333 23.210667 112.64 75.776z" fill="#635DF7" opacity=".7" p-id="6841"></path></svg>                      </div>
                            <div>
                              出差
                            </div>
                          </div>
                          <div class="icondiv">
                            <div>
                              <svg t="1664354574389" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7952" width="20" height="20"><path d="M499.712 225.248v68.288h57.312V422.4h-51.808v51.424a338.88 338.88 0 0 1 124.448-83.328V293.504h60.032V225.248h-189.984z m-100.224 297.408c2.944-75.648 4.576-150.176 4.96-223.616h-58.944a2930.304 2930.304 0 0 1-5.504 218.112c19.456 0.736 39.296 2.56 59.488 5.504z m-55.616 69.92c-19.648 3.488-38.912 6.752-57.824 9.696V475.84h48.448v-67.2H286.048V295.712h52.832V227.424H161.024v68.288h56.736v112.896H163.776v67.2h53.984v136.32c-22.016 3.136-43.52 5.824-64.448 8l8.256 72.672 177.344-29.184c0.736-20.928 2.368-44.608 4.96-71.04z m80.384-133.824c0 99.488-31.008 175.68-93.056 228.576 20.192 15.424 39.648 31.744 58.368 48.992 8.096-7.872 15.68-16.128 22.816-24.64 0-1.696-0.256-3.328-0.256-4.992 0-81.952 29.056-157.056 77.408-215.68 0.256-6.72 0.768-13.248 0.768-20.16V199.904h-66.08v258.848z" p-id="7953" fill="#FFD2D2"></path><path d="M432.224 797.824H88.416a10.432 10.432 0 0 1-10.464-10.496V116.672c0-5.76 4.672-10.496 10.464-10.496h670.656c5.824 0 10.496 4.704 10.496 10.496v265.472a311.456 311.456 0 0 1 73.376 18.688v-284.16a83.84 83.84 0 0 0-83.872-83.84H88.416a83.84 83.84 0 0 0-83.84 83.84v670.656a83.84 83.84 0 0 0 83.84 83.872h380.96a315.712 315.712 0 0 1-37.152-73.376z" p-id="7954" fill="#FFD2D2"></path><path d="M659.68 695.424l39.904 77.376s64.864-157.184 167.104-209.568c-2.432 37.44-12.448 69.888 4.992 109.76-44.864 10.016-137.152 122.24-167.104 177.12-42.432-52.384-92.32-92.256-127.232-104.736l82.336-49.952z" p-id="7955" fill="#FFD2D2"></path><path d="M745.6 434.24a272.48 272.48 0 1 0 0 544.96 272.48 272.48 0 0 0 0-544.96z m0 471.584a199.104 199.104 0 1 1 0-398.24 199.136 199.136 0 0 1 0 398.24z" p-id="7956" fill="#FFD2D2"></path></svg>                     </div>
                            <div>
                              加班
                            </div>
                          </div>
                        </template>
                        <template #date-cell="{ data }">
                          <span>{{ data.day.slice(8,10) }}</span>
                          <template v-for="p in date.date">
                            <template v-if="data.day==p.day">
                              <div v-if="p.age==1">

                                <svg t="1664354429260" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5779" width="20" height="20"><path d="M376.6784 726.4768c0-33.4848 5.2224-65.792 15.104-96.1536 9.8816-30.8736 24.4224-58.7776 42.1888-84.48 18.3808-25.8048 39.5264-48.3328 64.5632-68.2496 24.32-20.0704 52.0704-35.584 81.7152-47.6672 2.048-4.5568 3.2768-9.0624 6.0416-16.2304l4.5056-12.3392c0.6656-3.84 2.048-7.68 3.2768-10.8544 6.0416-2.048 11.264-5.2224 16.3328-9.7792 4.5568-3.84 8.4992-9.728 12.4928-16.7424 3.2768-7.1168 6.0416-17.4592 7.2704-29.6448 0.6656-9.0624 0.6656-16.7424-0.6656-23.1936-1.9456-6.4512-3.2768-11.52-6.0416-15.5136-2.6112-4.5568-6.0416-8.3968-9.8816-11.008 0-23.9104-2.048-47.104-4.5056-69.632-3.2768-20.0704-7.8336-41.216-15.104-63.1808-6.6048-21.9648-17.8688-42.5984-32.9728-60.5696-6.6048-7.68-15.7696-16.2304-26.9312-23.9104-11.264-7.68-24.32-14.848-38.7072-21.2992-14.5408-5.7856-30.208-10.9568-46.6944-14.848-16.3328-3.84-32.9728-5.888-49.9712-5.888-13.1584 0-26.9312 1.2288-41.472 3.2768-14.5408 1.9456-28.9792 5.7856-43.52 11.52-14.5408 5.7856-28.9792 14.1312-42.1376 23.9104-13.2096 9.728-25.7024 22.6816-37.4784 38.7072-11.8272 16.7424-21.1456 35.584-26.9312 56.7296-6.0416 21.2992-9.8816 41.216-12.4928 59.3408-2.048 21.9648-3.2768 43.264-3.2768 65.0752-5.2224 5.888-8.4992 11.52-11.264 17.9712-2.6112 6.4512-4.5568 13.568-5.2224 21.2992-0.6656 7.68 0.6656 16.7424 3.2768 26.5216 2.6112 10.2912 6.6048 17.4592 10.5984 22.6816 3.9936 5.2224 7.8336 9.728 11.264 12.3392 4.5568 2.6112 8.4992 4.5056 12.4928 5.888 2.6112 9.0624 6.0416 17.9712 8.4992 26.5216 2.6112 7.68 6.0416 14.848 9.8816 21.9648 3.2768 7.1168 7.8336 12.9024 12.4928 16.7424 9.8816 8.3968 19.0976 16.2304 26.9312 23.9104 7.8336 7.68 12.4928 18.7904 13.8752 31.5904 0.6656 9.7792 0.6656 17.4592 0.6656 25.1392 0 7.168-2.048 14.1312-4.5568 21.2992-3.2768 7.168-7.8336 14.1312-14.5408 21.2992-6.7072 7.1168-15.7696 14.1312-28.416 21.9648-9.8816 6.4512-21.7088 11.52-34.2016 16.1792-12.4928 4.5568-25.7024 8.3968-38.8608 12.3392-13.8752 3.84-26.9312 7.68-39.5776 11.52-12.4928 4.5568-24.32 9.728-34.8672 16.2304-10.5984 7.168-19.7632 14.848-26.9312 23.9104-7.2704 9.0624-11.8272 20.5824-14.5408 34.7648-6.0416 37.376-7.2704 67.6864-3.9936 91.4432 3.2768 23.9104 7.8336 38.0416 14.5408 42.5984 3.9936 2.6112 12.4928 5.888 25.7024 8.3968 13.2096 2.6112 29.6448 5.888 48.7424 8.3968 19.7632 3.2768 40.8064 5.888 64.5632 8.3968 23.6032 2.6112 47.5136 5.2224 71.1168 7.168 24.4224 1.9456 47.5136 3.1744 69.888 4.4032 22.3744 1.2288 42.1888 2.048 59.3408 2.048h23.1936c-13.8752-23.9104-25.1392-49.7152-32.9728-76.7488-7.8336-27.4432-11.8272-55.8592-11.8272-85.5552z m0 0" p-id="5780" fill="#d4237a"></path><path d="M959.3856 623.36c-14.5408-32.9728-34.2016-61.2352-59.3408-86.3744-24.9856-24.4224-53.9648-43.8272-87.5008-57.9584-33.6384-14.1312-69.0688-21.2992-107.4176-21.2992-38.1952 0-74.4448 7.1168-107.9296 21.2992-33.6384 14.1312-62.6176 33.4848-87.5008 57.9584-24.9856 24.4224-44.7488 53.5552-59.3408 86.3744-14.5408 32.9728-21.7088 67.6864-21.7088 105.0624s7.2704 72.2432 21.7088 105.0624c14.5408 32.9728 34.2016 61.2352 59.3408 86.3744 24.9856 24.4224 53.9648 43.8272 87.5008 57.9584 33.6384 14.1312 69.888 21.2992 107.9296 21.2992 38.0416 0 73.728-7.1168 107.4176-21.2992 33.6384-14.1312 62.6176-33.4848 87.5008-57.9584 25.1392-24.4224 44.7488-53.5552 59.3408-86.3744 14.5408-32.9728 21.7088-67.6864 21.7088-105.0624 0-37.2224-7.2704-72.0896-21.7088-105.0624z m-178.4832 224.8192c-10.5984 0-21.1456-4.096-29.1328-12.0832l-82.1248-82.432c-7.424-7.2704-12.0832-17.7152-12.0832-28.9792v-164.4032c0-22.784 18.3808-41.0624 41.0624-41.0624 22.6816 0 41.0624 18.3808 41.0624 41.0624v147.5072l70.1952 70.1952c16.0768 16.0768 16.0768 42.0352 0 58.112-7.9872 7.936-18.432 12.0832-28.9792 12.0832z m0 0" p-id="5781" fill="#d4237a"></path></svg>
                                <div></div>
                              </div>
                              <div v-if="p.age==2">
                                <svg t="1664354574389" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7952" width="20" height="20"><path d="M499.712 225.248v68.288h57.312V422.4h-51.808v51.424a338.88 338.88 0 0 1 124.448-83.328V293.504h60.032V225.248h-189.984z m-100.224 297.408c2.944-75.648 4.576-150.176 4.96-223.616h-58.944a2930.304 2930.304 0 0 1-5.504 218.112c19.456 0.736 39.296 2.56 59.488 5.504z m-55.616 69.92c-19.648 3.488-38.912 6.752-57.824 9.696V475.84h48.448v-67.2H286.048V295.712h52.832V227.424H161.024v68.288h56.736v112.896H163.776v67.2h53.984v136.32c-22.016 3.136-43.52 5.824-64.448 8l8.256 72.672 177.344-29.184c0.736-20.928 2.368-44.608 4.96-71.04z m80.384-133.824c0 99.488-31.008 175.68-93.056 228.576 20.192 15.424 39.648 31.744 58.368 48.992 8.096-7.872 15.68-16.128 22.816-24.64 0-1.696-0.256-3.328-0.256-4.992 0-81.952 29.056-157.056 77.408-215.68 0.256-6.72 0.768-13.248 0.768-20.16V199.904h-66.08v258.848z" p-id="7953" fill="#FFD2D2"></path><path d="M432.224 797.824H88.416a10.432 10.432 0 0 1-10.464-10.496V116.672c0-5.76 4.672-10.496 10.464-10.496h670.656c5.824 0 10.496 4.704 10.496 10.496v265.472a311.456 311.456 0 0 1 73.376 18.688v-284.16a83.84 83.84 0 0 0-83.872-83.84H88.416a83.84 83.84 0 0 0-83.84 83.84v670.656a83.84 83.84 0 0 0 83.84 83.872h380.96a315.712 315.712 0 0 1-37.152-73.376z" p-id="7954" fill="#FFD2D2"></path><path d="M659.68 695.424l39.904 77.376s64.864-157.184 167.104-209.568c-2.432 37.44-12.448 69.888 4.992 109.76-44.864 10.016-137.152 122.24-167.104 177.12-42.432-52.384-92.32-92.256-127.232-104.736l82.336-49.952z" p-id="7955" fill="#FFD2D2"></path><path d="M745.6 434.24a272.48 272.48 0 1 0 0 544.96 272.48 272.48 0 0 0 0-544.96z m0 471.584a199.104 199.104 0 1 1 0-398.24 199.136 199.136 0 0 1 0 398.24z" p-id="7956" fill="#FFD2D2"></path></svg>
                                <svg t="1664354365892" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4670" width="20" height="20"><path d="M235.8 67.9C153 87.4 87.4 153 67.9 235.8L235.8 67.9z" fill="#FF6968" p-id="4671"></path><path d="M301.7 62H287C163.3 62 62 163.3 62 287v14.7L301.7 62z" fill="#FF6867" p-id="4672"></path><path d="M361.7 62H287C163.3 62 62 163.3 62 287v74.7L361.7 62z" fill="#FF6866" p-id="4673"></path><path d="M421.6 62H287C163.3 62 62 163.3 62 287v134.6L421.6 62z" fill="#FF6765" p-id="4674"></path><path d="M481.6 62H287c-19.4 0-38.3 2.5-56.3 7.2L69.2 230.7c-4.7 18-7.2 36.9-7.2 56.3v194.6L481.6 62z" fill="#FF6764" p-id="4675"></path><path d="M62 541.6L541.6 62H297.9L62 297.9z" fill="#FF6763" p-id="4676"></path><path d="M62 601.6L601.6 62H357.8L62 357.8z" fill="#FF6662" p-id="4677"></path><path d="M62 417.8v243.7L661.5 62H417.8z" fill="#FF6661" p-id="4678"></path><path d="M62 477.8v243.7L721.5 62H477.8z" fill="#FF6560" p-id="4679"></path><path d="M737 62H537.8L62 537.8V737c0 13.9 1.3 27.5 3.7 40.8l712-712C764.5 63.3 750.9 62 737 62z" fill="#FF655F" p-id="4680"></path><path d="M737 62H597.7L62 597.7V737c0 30.8 6.3 60.1 17.6 86.9L823.9 79.6C797.1 68.3 767.8 62 737 62z" fill="#FF655E" p-id="4681"></path><path d="M862.8 100.7C826.8 76.3 783.5 62 737 62h-79.3L62 657.7V737c0 46.5 14.3 89.8 38.7 125.8l762.1-762.1z" fill="#FF645D" p-id="4682"></path><path d="M895.6 127.8C854.9 87.2 798.7 62 737 62h-19.3L62 717.7V737c0 61.7 25.2 117.9 65.8 158.6l767.8-767.8z" fill="#FF645C" p-id="4683"></path><path d="M65.2 774.5C75.6 835.8 111 889 160.6 922.8l762.3-762.3c-33.9-49.5-87-85-148.3-95.4L65.2 774.5z" fill="#FF635B" p-id="4684"></path><path d="M78.5 821.2c22.4 55.1 66.2 99.6 120.8 122.9l744.8-744.8c-23.3-54.7-67.8-98.4-122.9-120.8L78.5 821.2z" fill="#FF635A" p-id="4685"></path><path d="M99.2 860.5c33 49.9 85.3 86.1 146.1 97.6l712.8-712.8c-11.5-60.8-47.7-113.1-97.6-146.1L99.2 860.5z" fill="#FF635A" p-id="4686"></path><path d="M962 287c0-63-26.2-120.1-68.3-161.1L125.9 893.7C166.9 935.8 224 962 287 962h14.3L962 301.3V287z" fill="#FF6259" p-id="4687"></path><path d="M962 287c0-47.8-15.1-92.2-40.7-128.7l-763 763C194.8 946.9 239.2 962 287 962h74.3L962 361.3V287z" fill="#FF6258" p-id="4688"></path><path d="M962 287c0-32.1-6.8-62.7-19.1-90.4L196.6 942.9c27.7 12.3 58.3 19.1 90.4 19.1h134.3L962 421.3V287z" fill="#FF6157" p-id="4689"></path><path d="M287 962h194.2L962 481.2V287c0-15.4-1.6-30.4-4.5-44.9L242.1 957.5c14.5 2.9 29.5 4.5 44.9 4.5z" fill="#FF6156" p-id="4690"></path><path d="M541.2 962L962 541.2V297.5L297.5 962z" fill="#FF6155" p-id="4691"></path><path d="M601.2 962L962 601.2V357.5L357.5 962z" fill="#FF6054" p-id="4692"></path><path d="M661.2 962L962 661.2V417.4L417.4 962z" fill="#FF6053" p-id="4693"></path><path d="M721.1 962L962 721.1V477.4L477.4 962z" fill="#FF5F52" p-id="4694"></path><path d="M962 737V537.4L537.4 962H737c17.1 0 33.7-1.9 49.7-5.6l169.7-169.7c3.7-16 5.6-32.6 5.6-49.7z" fill="#FF5F51" p-id="4695"></path><path d="M962 597.4L597.4 962H737c123.8 0 225-101.3 225-225V597.4z" fill="#FF5F50" p-id="4696"></path><path d="M962 657.3L657.3 962H737c123.8 0 225-101.3 225-225v-79.7z" fill="#FF5E4F" p-id="4697"></path><path d="M962 717.3L717.3 962H737c123.8 0 225-101.3 225-225v-19.7z" fill="#FF5E4E" p-id="4698"></path><path d="M957.5 781.8L781.8 957.5c88-18 157.7-87.7 175.7-175.7z" fill="#FF5D4D" p-id="4699"></path><path d="M701 728H323c-19.9 0-36-16.1-36-36V386c0-19.9 16.1-36 36-36h378c19.9 0 36 16.1 36 36v306c0 19.9-16.1 36-36 36z" fill="#FFCDCB" p-id="4700"></path><path d="M431 404c-14.9 0-27-12.1-27-27v-54c0-14.9 12.1-27 27-27s27 12.1 27 27v54c0 14.9-12.1 27-27 27zM593 404c-14.9 0-27-12.1-27-27v-54c0-14.9 12.1-27 27-27s27 12.1 27 27v54c0 14.9-12.1 27-27 27z" fill="#FFE9E9" p-id="4701"></path><path d="M502.4 624.2l-0.4 0.4c-7 7-18.4 7-25.5 0l-65.8-65.8c-7-7-7-18.4 0-25.5l0.4-0.4c7-7 18.4-7 25.5 0l65.8 65.8c7 7.1 7 18.5 0 25.5z" fill="#FFFFFF" p-id="4702"></path><path d="M482.3 624.6l-0.4-0.4c-7-7-7-18.4 0-25.5l105.5-105.5c7-7 18.4-7 25.5 0l0.4 0.4c7 7 7 18.4 0 25.5L507.7 624.6c-7 7-18.4 7-25.4 0z" fill="#FFFFFF" p-id="4703"></path></svg>
                              </div>
                            </template>
                          </template>
                          <div :class="data.isSelected ? 'is-selected' : ''" style="font-size: 5px">
                            {{ data.isSelected ? '上班打卡：' : '' }}
                          </div>
                          <div :class="data.isSelected ? 'is-selected' : ''" style="font-size: 5px">
                            {{ data.isSelected ? '下班打卡：' : '' }}
                          </div>
                        </template>
                        </el-calendar>
                    </el-card>
                  </el-tab-pane>
                </el-tabs>
              </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import {reactive, ref, toRefs} from "vue";
import {onBeforeMount, onMounted} from "@vue/runtime-core";
import {Search} from "@element-plus/icons-vue"
import {useStore} from "vuex";
import * as echarts from "echarts";
import moment from "moment"
//人员组织搜索框
const input2 = ref('');
//左边人员树形结构
interface Tree {
  label: string
  children?: Tree[]
}
const data: Tree[] = [
  {
    label: '杨文元',
    children: [
      {
        label: '邓登举',
        children: [
          {
            label: '汪洋',
          },
        ],
      },
      {
        label: '方勇亮',
        children: [
          {
            label: '张海洋',
          },
        ],
      },
    ],
  },
]
const defaultProps = {
  children: 'children',
  label: 'label',
}
const handleNodeClick = (data: Tree) => {
  console.log(data)
}
//tabs默认选中第一个
const activeName="floor"
//获取当前时间并格式化
let str = moment(new Date()).format("YYYY 年 MM 月")
//1.通过vue3.x中的refs标签用法，获取到container容器实例
const chart = ref(null);
//2.定义在本vue实例中的echarts实例
let myEcharts = reactive({
  setOption(option: { legend: {
    top: string; left: string };
    series: { data: { name: string; value: number }[];
      avoidLabelOverlap: boolean;
      emphasis: { label: { show: boolean; fontSize: string; fontWeight: string } }; y: string;
      label: { show: boolean; position: string }; labelLine: { show: boolean }; type: string;
      radius: string[] }[]; tooltip: { trigger: string } }) {

  },
  resize() {

  }
});
let option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'//位置
  },
  series: [
    {
      y:'10%',
      type: 'pie',//类型
      radius: ['30%', '60%'],//双圆半径
      avoidLabelOverlap: true,//防止重叠
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '15',
          fontWeight: 'bold'//字体加粗
        }
      },
      labelLine: {
        show: false//隐藏导线
      },
      data: [
        { value: 28, name: '28应出勤' },
        { value: 10, name: '10出勤' },
      ]
    }
  ]
};
//onMounted钩子函数
onMounted(()=>{
  //初始化echarts
  init();
})
//初始化echarts实例方法
const init = ()=> {
  //3.初始化container容器
  myEcharts = echarts.init(chart.value);
  //5.传入数据
  myEcharts.setOption(option)
  //additional：图表大小自适应窗口大小变化
  window.onresize = () => {
    myEcharts.resize();
  }
}
//请假表格
const d = reactive({
  //数据
  tableData:[
    {
      date: '2016-05-03',
      name: 'Tom',
      address: '3天',
    }
  ],

});
//改变表格单元格背景

const {tableData,} = toRefs(d);
//日历
const calendar = ref()
const selectDate = (val: string) => {
  calendar.value.selectDate(val)
}
//日历判断图标
const date=reactive({
  date:[
    {day:'2022-10-09',age:1},
    {day:'2022-10-01',age:2}
  ],
  dd:'2022-10-05'
})
</script>

<style scoped>
.tbUpDiv{
  width: 100%;
  border-top: 1px solid gainsboro;
  border-bottom: 1px solid gainsboro;
  position: relative;
}
.tbImg{
  margin-left: 30px;
  margin-top: 15px;
}
.tbUpPost{
  position: relative;
  top: -19px;
  left: 20px;
}
.icondiv{
  display: flex;margin: 0px 10px
}

</style>